import 'package:flutter/material.dart';



void main() => runApp(new MyApp());


class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(

      title: 'appTitle',

      theme: new ThemeData(primarySwatch: Colors.blueGrey),

      home: new HomePage(),

      routes: {

        '/first': (BuildContext context) => new FirstPage(),
        '/second': (BuildContext context) => new SecondPage(),
      },

//      initialRoute: '/first',
    );
  }
}


class HomePage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}


class HomePageState extends State<HomePage> {

  int _selectedIndex = 0;


  /// 数组
  final _widgetOptions = [

    new Text("Index 1: one"),
    new Text('Index 2: two'),
    new Text('Index 3: three'),
    new Text('Index 4: four'),
  ];


  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;

      ///一个意思
      items.forEach((ItemView itemView) => print(itemView.title));
      ///匿名函数 (f){},f 为参数，可以不声明类型
      items.forEach((f) =>  print(f.title));

      ///一个意思
      items.forEach((f) => printElement(f));
      items.forEach(printElement);

      var a = makeAdder(2);
      print('wy_ : ' + a.toString());
    });
  }

  ///参数类型必须和list的泛型一致
  void printElement(ItemView itemView) {
    print(itemView.title);
  }


  /// 返回一个函数，返回的函数参数与 [addBy] 相加。
  Function makeAdder(num addBy) {
    return (num i) => addBy + i;
  }


  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(

        length: items.length,

        child: new Scaffold(

          drawer: new Drawer(

            child: new ListView(

              children: <Widget>[

                UserAccountsDrawerHeader(

                  accountName: new Text('name'),

                  accountEmail: new Text('email'),

                  currentAccountPicture: new CircleAvatar(

                    backgroundImage: AssetImage('images/36.jpg'),
                  ),


                  onDetailsPressed: () {
                    print('123');

                  },

                  otherAccountsPictures: <Widget>[

                    new Container(

                      child: new Image.asset('images/36.jpg'),
                    )
                  ],
                )
              ],
            ),
          ),


          appBar: new AppBar(
            title: new Text('MaterialApp',),
            centerTitle: true,
            actions: <Widget>[new Center(child: new IconButton(
                icon: new Icon(Icons.search), onPressed: () {}),)
            ],

//            bottom:

          ),

          body: new Column(

            children: <Widget>[

              new TabBar(

                indicatorColor: Colors.black,
                unselectedLabelColor: Colors.blueGrey,
                labelColor: Colors.black,

                tabs: items.map((ItemView item) {
                  return new Tab(
                    text: item.title,
                    icon: new Icon(item.iconData),
                  );
                }).toList(),

              ),

              ///不添加 Expanded 会报错 高度宽度什么的
              new Expanded(
                child: new TabBarView(

                    children: items.map((ItemView itemView) {
                      return new Padding(

                        padding: const EdgeInsets.all(16),
                        child: new TabBarSelectView(itemView: itemView,),
                      );
                    }).toList()


                ),

              ),

            ],
          ),




          ///底部导航栏
          bottomNavigationBar: new BottomNavigationBar(

              items: <BottomNavigationBarItem>[

                new BottomNavigationBarItem(
                    icon: Icon(Icons.chat), title: Text('one')),

                new BottomNavigationBarItem(
                    icon: Icon(Icons.memory), title: Text('two')),

                new BottomNavigationBarItem(
                    icon: Icon(Icons.launch), title: Text('three')),

                new BottomNavigationBarItem(
                    icon: Icon(Icons.satellite), title: Text('four')),
              ],

              currentIndex: _selectedIndex,
              selectedItemColor: Colors.black,
              unselectedItemColor: Colors.blueGrey,
              onTap: _onItemTapped,
              //不设置这条，选中的item会变大 少于四个没有变化
              type: BottomNavigationBarType.fixed

          ),


          floatingActionButton: new FloatingActionButton(

            onPressed: () {},
            tooltip: 'add',
            child: Icon(Icons.add),),


        )
    );
  }

}




///tabBar 实体类
class ItemView {

  final String title;
  final IconData iconData;

  ///有大括号调用的时候需要加上参数名称  title:,参数个数变为可选
  const ItemView({this.title, this.iconData,});

//  const ItemView(this.title,this.iconData,);
}

///tabBar tab数据
const List<ItemView> items = const <ItemView>[

  const ItemView(title: 'one', iconData: Icons.directions_bike),

  const ItemView(title: 'two', iconData: Icons.directions_boat),

  const ItemView(title: 'three', iconData: Icons.directions_bus)

// const ItemView('one',  Icons.directions_bike),

];

///tabBar 被选中的视图
class TabBarSelectView extends StatelessWidget {

  final ItemView itemView;

  ///Key: 这个key属性类似于React/Vue中的key，主要的作用是决定是否在下一次build时复用旧的widget，决定的条件在canUpdate()方法中 有待理解
  const TabBarSelectView({Key myKey, this.itemView}) : super(key: myKey);

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme
        .of(context)
        .textTheme
        .display1;

    return new Card(

      color: Colors.white,

      child: new Center(

        child: new Column(

          mainAxisSize: MainAxisSize.max,

          //将子控件放在主轴的中间位置
          crossAxisAlignment: CrossAxisAlignment.center,

          children: <Widget>[

            new Icon(itemView.iconData, size: 128, color: textStyle.color,),

            new Text(itemView.title, style: textStyle,)

          ],
        ),
      ),

    );
  }

}




class FirstPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(

      appBar: new AppBar(title: new Text('FirstPage'),),

      body: new Center(

        child: new RaisedButton(

          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: new Text('First to Second'),
        ),

      ),
    );
  }
}


class SecondPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(

      appBar: AppBar(title: new Text('SecondPage'),),

      body: new Center(

        child: new Text('SecondPage'),
      ),
    );
  }
}